<template>
    <div class="shareCoupons">
      <div class="shareCoupons_boby">
        <header>
          <h6>今天已送出<span>{{shareMoney}}</span>元抵扣劵</h6>
          <div class="img">
            <img src="https://image.soole.com.cn/sl991.png"/>
          </div>
        </header>
        <section class="section">
          <div class="hd" @click="cart()">活动规则</div>
          <div class="section_con">
            <p class="section_con_p">每分好友可得抵扣劵</p>
            <div class="section_con_div">
               <p>￥<span>200</span></p>
              <div>可消费</div>
            </div>
            <p class="section_con_p1">24小时后红包抵扣劵将失效</p>
          </div>
          <div class="section_foot">
            <div>立即分享</div>
            <p>累计到200元可到商城消费</p>
          </div>
        </section>
        <section class="section1">
          <div class="section1_con">
            <van-tabs type="card" v-model="active" swipeable animated @click="selectOrder" @change="change()">
              <van-tab title="领券记录">
                <van-list :finished="finished" finished-text="没有更多了">
                  <div class="list nwwest-roll" id="nwwest-roll">
                    <ul>
                      <li v-for="(item,index) in list" ref="rollul" :class="{anim:animate==true}">
                        <div class="box_content">
                          <div class="left">
                            <img :src="item.avatar" alt>
                          </div>
                          <div class="con">
                            <p>{{item.nick_name}}</p>
                            <p>抵扣劵天天领，好运年年有</p>
                          </div>
                          <div class="right">
                            刚刚获得{{item.money}}元
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </van-list>
              </van-tab>
              <van-tab title="好友助力">
                <van-list :finished="finished" finished-text="没有更多了">
                  <div class="list nwwest-roll">
                    <ul>
                      <li v-for="(item,index) in shareDate" ref="rollul" :class="{anim:animate==true}">
                        <div class="box_content">
                          <div class="left">
                            <img :src="item.avatar" alt>
                          </div>
                          <div class="con1">
                            <p>{{item.nick_name}}</p>
                            <p>2019.10.28</p>
                            <p>好友帮忙助力10元抵扣劵</p>
                          </div>
                          <div class="right">
                           +{{item.money}}元
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </van-list>
              </van-tab>
              <van-tab title="晒单记录">
                <van-list :finished="finished" finished-text="没有更多了">
                  <div class="list nwwest-roll">
                    <ul>
                      <li v-for="(item,index) in sharelist" ref="rollul" :class="{anim:animate==true}">
                        <div class="box_content">
                          <div class="left">
                            <img :src="item.avatar" alt>
                          </div>
                          <div class="con2">
                            <div class="con_name">
                              <p>{{item.nick_name}}</p>
                              <div>+200元</div>
                            </div>

                            <p>2019.10.28</p>
                            <p>邀请20名好友获得了200元</p>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </van-list>
              </van-tab>
            </van-tabs>

          </div>
        </section>
        <footer>
          <img src="https://image.soole.com.cn/sl93.png">
        </footer>
        <!--弹出框-->
        <div v-if="botton_show" class="botton_show">
          <img src="https://image.soole.com.cn/sl96.png" class="x" @click="dle()"/>
           <div class="shop_car_detail" >
               <div class="title">
                 <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/news/1.png">
               </div>
               <div class="cont">
                 <div class="cont_title">
                   <div>仅剩10元</div>
                   <van-progress  color="#FFEA01" :percentage="25" stroke-width="6" text-color="#FF2B3D"  pivot-text=""/>
                 </div>
                  <p>抵扣劵可直接当现金消费</p>
                  <p>快来帮帮我</p>
               </div>
               <div class="foot">
                 <div @click="submitFn()">
                   帮助好友即可获得抵扣劵
                 </div>
                 <p>搜了农庄官方回馈，助力好友领抵扣券</p>
               </div>
           </div>
        </div>
        <div v-if="botton_show2" class="botton_show" @click="dle1()">
          <img src="https://image.soole.com.cn/sl101.png" class="y"/>
          <div class="shop_car_detail1" >
            <div class="cont1">
              <p class="p1">您已获得购物券</p>
              <p class="p2">￥<span>{{randomMoney}}</span></p>
              <div class="cont_title">
                <div>到账进度</div>
                <van-progress  color="#FFEA01" :percentage="25" stroke-width="6" text-color="#FF2B3D"  pivot-text=""/>
              </div>
              <p class="p3">点击右上角，分享给好友
                可以再领一次购物券哦</p>
            </div>
          </div>
        </div>
        <div v-if="botton_show1" class="botton_show">
          <div class="shop_car_detail2" >
            <div class="cont2">
              <p class="p4">您还差10元</p>
              <p class="p5">就能获得200抵扣券</p>
              <div class="cont_title">
                <div>仅剩10元</div>
                <van-progress  color="#FFEA01" :percentage="25" stroke-width="6" text-color="#FF2B3D"  pivot-text=""/>
              </div>
              <div class="foot1">
                <div>
                  继续分享
                </div>
                <p>放弃抵扣券</p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="botton_show3" class="botton_show">
          <div class="text" >
            <h6>活动规则</h6>
            <p>1、用户在活动中可以通过邀请好友助力的方式获得购物券，，已经获得的购物券可以在自己的活动主页面中进行查看，购物券可以再搜了农庄APP中进行商品消费，快去邀请好友领取优惠券吧。
            </p>
            <p>2、用户需要在24小时内累积到金额达到一定的金额门槛后，平台将直接将购物券入账到账户，如逾期未达到门槛，所积累的金额均会失效。</p>
            <p>3、用户累计的购物券金额达到门槛后，会保留可消费使用72小时，逾期未进行消费的购物券将会失效，请尽快进入商城消费 </p>
          </div>
          <img src="https://image.soole.com.cn/sl96.png" class="xx" @click="dle2()"/>
        </div>
      </div>
    </div>
</template>

<script>
  import sha1 from 'js-sha1'
    export default {
        name: "shareCoupons",
      data(){
        return {
          active: 0,
          status:1,
          botton_show:true,
          botton_show1:false,
          botton_show2:false,
          botton_show3:false,
          popInfo: {},
          ramIndex:10,
          price:this.$route.query.price,
          name:this.$route.query.name,
          id:this.$route.query.id,
          mage_url:this.$route.query.mage_url,
          urlUser_id:this.$route.query.user_id,
          finished:false,
          animate:true,
          list:[],
          shareDate:[],
          sharelist:[],
          userIn:JSON.parse(localStorage.getItem('userInfo')),
          userInif:JSON.parse(localStorage.getItem('wxUserInfo')),
          shareMoney:'',
          randomMoney:'',
        }
      },
      created:function () {
        setTitle('分享领劵');

        // if(this.urlUser_id==this.userIn.userId){
        //     this.botton_show2=true;
        // }

      },
      mounted(){
         this.selectOrder();
         // this.getWx();
         // this.userInfo();
         // this.wxRegCallback();
      },
      methods: {
        change(){
          console.log(this.active)
          if(this.active==0){
            setInterval(this.scroll,8000)
          }else if(this.active==1){
            setInterval(this.scroll1,8000)
          }else if(this.active==2){
            setInterval(this.scroll2,8000)
          }
        },
        //文章滚动
        scroll(){
          this.animate=!this.animate;
          var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
          setTimeout(function(){
            that.list.push(that.list[0]);
            that.list.shift();
            that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
          },0)
        },
        scroll1(){
          this.animate=!this.animate;
          var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
          setTimeout(function(){
            that.shareDate.push(that.shareDate[0]);
            that.shareDate.shift();
            that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
          },0)
        },
        scroll2(){
          this.animate=!this.animate;
          var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
          setTimeout(function(){
            that.sharelist.push(that.sharelist[0]);
            that.sharelist.shift();
            that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
          },0)
        },
        getWx() {
          let url = window.location.origin + "/static/getCode.html";

         // var list = JSON.parse(localStorage.getItem('wxUserInfo'));

          let wxCode =localStorage.getItem("wxCode");
          console.log(wxCode)
          if ( wxCode == "" || wxCode == undefined || wxCode == null){
            // this.url = `code: ${wxCode}`;
              console.log(111, wxCode);
            var responseUrl = encodeURIComponent("http://www.mysoule.com/shareCoupons");
          // window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx994320d0aac3cee8&redirect_uri=" + responseUrl + "&response_type=code&scope=snsapi_userinfo#wechat_redirect";
            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx994320d0aac3cee8&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_userinfo&state=succ`;

           return;
          }
        },
        async userInfo(){
          let wxCode =localStorage.getItem("wxCode");
          let params = {
            params: {
              code: wxCode,
              type:1
            }
          };
          const res=await this.$axios.get(this.$api.toWxActivity, params);
          console.log(res);
          if(res.success && res.code==""){
            localStorage.setItem('userInfo', JSON.stringify(res.data));
          }else if(res.code=="-1"){
            localStorage.setItem('wxUserInfo', JSON.stringify(res.data));
          }
        },
        //返回
        onClickLeft() {
          this.$router.go(-1);
        },
        selectOrder(index,title){
          if(this.active==0){
            this.status=1;
          }else if(this.active==1){
            this.status=2;
          }else if(this.active==2){
            this.status=3;
          }
          let data={

              // pageSize:this.pageSize,
              // pageNum:this.pageNum,
              type:this.status,
              userId:96878
          };
          let res=this.$axios.post(this.$api.shareCouponsList,data);
          res.then(res => {
            if(res.success){
              this.shareMoney=res.data.shareMoney;
              this.randomMoney=res.data.randomMoney;
              if(this.active==0){
                this.list=res.data.shareDate;
              }else  if(this.active==1){
                this.shareDate=res.data.shareList;
              }else  if(this.active==2){
                this.sharelist=res.data.shaiList;
              }
            }
          }).catch(error => {

          });
        },
        cart() {
          this.botton_show3 =true;
        },
        //关闭模态框
        dle() {
          this.botton_show =false;
        },
        dle1() {
          this.botton_show2 =false;
        },
        dle2() {
          this.botton_show3 =false;
        },
        wxRegCallback () {
          var that=this;
          var json_data=that.$axios.get(that.$api.weixinUrl);
          var fx_noncestr=that.$base.randomString(32);
          var fx_tampstr=that.$base.createTimestamp();

          json_data.then(function(result){
            var signStr = "jsapi_ticket=" + result.data + "&noncestr=" + fx_noncestr + "&timestamp=" + fx_tampstr + "&url=" + window.location.href;
            signStr=sha1(signStr);
            that.$wxjs.config({
              debug: false,
              appId: "wx994320d0aac3cee8",
              timestamp: fx_tampstr,
              nonceStr: fx_noncestr,
              signature: signStr,
              jsApiList: ['chooseImage', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay']
            });
            let Id= that.$route.query.id;
            // 用于微信JS-SDK回调
            that.$wxjs.ready(function () {
              that.$wxjs.onMenuShareTimeline({
                title:that.ShopPingData.name,
                desc: that.ShopPingData.name, // 分享描述
                link:'http://www.mysoule.com/ProductDetails?id='+Id+"&type="+that.type,
                imgUrl: that.ShopPingData.image_url,
                success: function () {
                  that.$toast("分享成功");
                },error: () => {
                  that.$toast("已取消分享");
                }
              });
              that.$wxjs.onMenuShareAppMessage({
                desc: that.ShopPingData.name, // 分享描述
                title:that.ShopPingData.name,
                link:'http://www.mysoule.com/ProductDetails?id='+Id+"&type="+that.type,
                imgUrl: that.ShopPingData.image_url,
                success: function () {
                  that.$toast("分享成功");
                },error: () => {
                  that.$toast("已取消分享");
                }
              });
            });
          })
        },
        submitFn(){
    //判断浏览器
    var u = navigator.userAgent;
      if(/MicroMessenger/gi.test(u)){
      // 引导用户在浏览器中打开
        alert('请在浏览器中打开');
        return;
       }
    var d = new Date();
    var t0 = d.getTime();
    if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
      //Android 向安卓同事索要链接
      if(openApp('en://startapp')){
          openApp('en://startapp');
      }else{
        //由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
        var delay = setInterval(function(){
          var d = new Date();
          var t1 = d.getTime();
          if( t1-t0<3000 && t1-t0>2000){
            alert('请下载APP');
            window.location.href = "app下载地址";
          }
          if(t1-t0>=3000){
            clearInterval(delay);
          }
        },1000);
      }
    }else if(u.indexOf('iPhone') > -1){
      //IOS 向同事索要链接
      if(openApp('ios--scheme')){
          openApp('ios--scheme');
      }else{
        var delay = setInterval(function(){
          var d = new Date();
          var t1 = d.getTime();
          if( t1-t0<3000 && t1-t0>2000){
            alert('请下载APP');
            window.location.href = "app下载地址";
          }
          if(t1-t0>=3000){
            clearInterval(delay);
          }
        },1000);
      }
    }
  },
        openApp(src) {
      // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
      // 否则打开a标签的href链接
          var ifr = document.createElement('iframe');
          ifr.src = src;
          ifr.style.display = 'none';
          document.body.appendChild(ifr);
          window.setTimeout(function(){
            document.body.removeChild(ifr);
          },2000);

        },
      }


  }
</script>

<style scoped>
  .shareCoupons{
    background:linear-gradient(0deg,rgba(253,35,82,1));
    width: 100%;
    height: 100%;
  }
  .shareCoupons_boby{
    background: url(https://image.soole.com.cn/sl90.png) no-repeat;
    background-size: 100%;
    height: 100%;
  }
  header h6{
   text-align: center;
    font-size: 0.17rem;
    color: #fff;
    padding: 0.15rem 0 0.1rem;
  }
  header h6 span{font-size: 0.24rem;}
  header .img{width: 80%;margin: 0 auto;}
  header .img img{width: 100%;}
  .hd{
    width:0.73rem;
    height:0.24rem;
    background:rgba(255,171,73,1);
    border-radius:0.12rem;
    position: absolute;
    right: -3%;
    top:20%;
    line-height: 0.24rem;
    color: #fff;
    padding-left: 0.1rem;
    font-size: 0.12rem;
  }
  .section_con{width: 44%;margin: 0.2rem 0 0 29%;}
  .section_con{text-align: center;}
  .section_con_p{font-size:0.11rem;font-weight:bold;color:rgba(255,43,61,1);}
  .section_con_div{
   overflow: hidden;
    padding: 0.06rem 0 0;
  }
  .section_con_div p{
    font-size:0.15rem;
    font-weight:bold;
    color:rgba(255,43,61,1);
    float: left;
    padding-left: 0.15rem;
  }
  .section_con_div p span{
    font-size:0.41rem;
  }
  .section_con_div div{
    width:0.38rem;
    height:0.18rem;
    background:rgba(255,230,0,1);
    border-radius:6px 15px 15px 0px;
    float: right;
    font-size: 0.09rem;
    line-height: 0.18rem;
    color:rgba(255,43,61,1);
    text-align: center;
  }
  .section_con_p1{
    font-size: 0.09rem;
    font-weight:bold;
    color:rgba(255,126,30,1);
  }
  .section_foot{
    width: 44%;
    margin: 0.18rem auto 0;
    text-align: center;
  }
  .section_foot div{
    background: url( https://image.soole.com.cn/sl91.png) no-repeat;
    background-size: 100% 0.6rem;
    width: 100%;
    font-size:0.21rem;
    font-weight:bold;
    color:rgba(255,23,70,1);
    line-height: 0.6rem;
  }
  .section_foot p{
    color: #fff;
    font-size: 0.12rem;
  }
  .section1{
    background: url( https://image.soole.com.cn/sl92.png) no-repeat;
    background-size: 100% 3rem;
    width: 90%;
    margin: 0.4rem auto 0.2rem;
  }
  .section1_con{
    width: 90%;
    margin: 0 auto;
    padding: 0.25rem 0 0.15rem;
  }
  /deep/.van-tabs .van-tabs__wrap .van-tabs__nav--card {
    border: 0!important;
    margin: 0 10px;
  }
  /deep/.van-tabs .van-tabs__wrap .van-tabs__nav--card .van-tab{
    color: rgba(255,36,81,1);
    border-right: 0!important;
    line-height: 28px;
  }
  /deep/.van-tabs .van-tabs__wrap .van-tabs__nav--card .van-tab--active{
    color: #fff!important;
    background:linear-gradient(0deg,rgba(255,35,81,1),rgba(255,164,146,1));
    border-radius:28px;
  }
  /deep/.van-tabs .van-tabs__content{
    margin: 0.1rem;
  }
  .list{
    height: 2.1rem;
    overflow: hidden;
  }
  .anim{transition: all 8s;}
  .list ul li:nth-child(1){
    border-top:0;
  }
  .list ul li{
    height: 0.7rem;
    border-top:1px solid rgba(255,231,236,1);;
  }
  .box_content{
    overflow: hidden;
  }
  .box_content .left{
    float: left;
    width:0.36rem;
    height:0.36rem;
    border-radius:50%;
    margin: 0.17rem 0 0.17rem 0.05rem;
  }
  .box_content .left img{
    width: 100%;
    border-radius:50%;
  }
  .box_content .con{
    float: left;
    padding-left: 2%;
  }
  .box_content .con p:nth-child(1){
    font-size:0.12rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.22rem;
    padding-top: 0.14rem;
  }
  .box_content .con p:nth-child(2){
    font-size:0.11rem;
    font-weight:bold;
    color:rgba(253,35,82,1);
    line-height:0.2rem;
  }
  .box_content .con1{
    float: left;
    padding-left: 2%;
  }
  .box_content .con1 p:nth-child(1){
    font-size:0.12rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.22rem;
    padding-top: 0.14rem;
  }
  .box_content .con1 p:nth-child(2){
    font-size:0.1rem;
    font-weight:bold;
    color:rgba(51,51,51,1)
  }
  .box_content .con1 p:nth-child(3){
    font-size:0.11rem;
    font-weight:bold;
    color:rgba(253,35,82,1);
    line-height:0.2rem;
  }
  .box_content .right{
    float: right;
    font-weight:bold;
    color:rgba(253,35,82,1);
    font-size:0.11rem;
    padding-right: 0.02rem;
    width: 22%;
    padding-top: 0.16rem;
  }
  .box_content .con2{
    float: left;
    padding-left: 2%;
  }
  .box_content .con2 p:nth-child(2){
    font-size:0.1rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
  }
  .box_content .con2 p:nth-child(3){
    font-size:0.11rem;
    font-weight:bold;
    color:rgba(253,35,82,1);
    line-height:0.2rem;
  }
  .con_name{
    overflow: hidden;
    padding-top: 0.1rem;
  }
  .con_name div{
    background: url( https://image.soole.com.cn/sl100.png) no-repeat;
    background-size: 100% 0.15rem;
    width:0.35rem;
    height:0.15rem;
    font-size:0.08rem;
    font-weight:bold;
    color:rgba(255,43,61,1);
    line-height: 0.15rem;
    text-align: center;
    float: left;
    margin-top: 0.03rem;
    margin-left: 0.05rem;
  }
  .con_name p{
    float: left;
    font-size: 0.12rem;
    font-weight: bold;
    color: rgba(51,51,51,1);
    line-height: 0.22rem;
  }
  footer{
    width: 90%;
    margin: 0 auto 0.2rem;
  }
  footer img{
    width: 100%;
  }
  .botton_show {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 120;
    position: fixed;
    top: 0;
    left: 0;
  }
  .xx{
    width:0.26rem;
    height:0.26rem;
    position: absolute;
    right: 46%;
    bottom:8%;
  }
  .x{
    width:0.26rem;
    height:0.26rem;
    position: absolute;
    right: 12%;
    top:11%;

  }
  .y{
    width:0.5rem;
    height:0.7rem;
    position: absolute;
    right: 2%;
    top:1%;
  }
  .shop_car_detail{
    background: url( https://image.soole.com.cn/sl94.png) no-repeat;
    background-size: 100% 3.5rem;
    width: 100%;
    margin: 20% auto;
    height: 3.5rem;
  }
  .title{
    width:0.59rem;
    border-radius:50%;margin: 0 auto;padding-top: 0.5rem;
  }
  .title img{width: 100%}
  .cont{width: 70%;margin: 0.3rem 0 0 13%;text-align: center;color:rgba(251,219,1,1);font-size: 0.16rem; font-weight:500;}
  .cont p:nth-child(2){
    padding-top: 0.1rem;
  }
  .foot{
    width: 70%;margin: 0.2rem 0 0 13%;text-align: center;
  }
 .foot div{
    background: url( https://image.soole.com.cn/sl95.png) no-repeat;
    background-size: 100% 0.5rem;
    line-height: 0.45rem;
    color:rgba(255,0,11,1);
    font-size: 0.16rem;
    font-weight:bold;
  }
 .foot p{
    font-size:0.13rem;
    font-weight:500;
    color:rgba(251,219,1,1);
    line-height:0.14rem;
    opacity:0.5;
    padding-top: 0.1rem;
  }
  .cont_title{
    width: 60%;height: 0.3rem;margin: 0 auto;
  }
  .cont_title div:nth-child(1){
    background: url( https://image.soole.com.cn/sl97.png) no-repeat;
    background-size: 100% 100%;
    width:0.5rem;
    height:0.18rem;
    font-weight:bold;
    color:rgba(255,43,61,1);
    font-size: 0.1rem;
    margin-left: 72%;
  }
  /deep/.van-progress{height: 0.06rem;}
  .shop_car_detail1{
    background: url( https://image.soole.com.cn/sl98.png) no-repeat;
    background-size: 100% 3.5rem;
    width: 100%;
    margin: 20% auto;
    height: 3.5rem;
  }
  .cont1{width: 70%;margin: 0 0 0 13%;text-align: center;font-size: 0.16rem; font-weight:500;padding-top: 1.2rem;}
  .p1{
    font-size:0.18rem;
    font-weight:normal;
    color:rgba(255,255,255,1);
    padding-top: 0.1rem;
  }
  .p2{
    color:rgba(255,240,0,1);
    font-size:0.14rem;
  }
  .p2 span{
    font-size:0.5rem;
    font-weight:800;
    color:rgba(255,240,0,1);
  }
  .p3{
    font-size:0.14rem;
    font-weight:bold;
    color:rgba(255,234,1,1);
    width: 70%;
    margin: 0.1rem auto;
  }
  .shop_car_detail2{
    background: url( https://image.soole.com.cn/sl99.png) no-repeat;
    background-size: 100% 3.5rem;
    width: 80%;
    margin: 24% auto;
    height: 3.79rem;
  }
  .cont2{width: 80%;margin: 0 auto;text-align: center;font-size: 0.16rem; font-weight:500;padding-top: 1.2rem;}
  .p4{
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(255,234,1,1);
  }
  .p5{
    padding: 0.1rem 0;
    font-size:0.2rem;
    font-weight:bold;
    color:rgba(255,234,1,1);
  }
  .foot1{
    padding-top: 0.1rem;
  }
  .foot1 div{
    background: url( https://image.soole.com.cn/sl95.png) no-repeat;
    background-size: 100% 0.5rem;
    line-height: 0.45rem;
    color:rgba(255,0,11,1);
    font-size: 0.16rem;
    font-weight:bold;
  }
  .foot1 p{
    font-size:0.14rem;
    font-weight:500;
    color:rgba(255,234,1,1);
    line-height:0.14rem;
    padding-top: 0.1rem;
  }
  .text{
    width:86%;
    background:rgba(255,255,255,1);
    border-radius:0.1rem;
    margin: 20% auto;
    padding: 0.2rem 0;
  }
  .text h6{
    text-align: center;
    font-size:0.16rem;
    color:rgba(0,0,0,1);
    padding: 0.2rem 0 0.1rem;
    font-weight:bold;
  }
  .text p{
    font-size:0.14rem;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:0.18rem;
    padding: 0 0.2rem;

  }
</style>
